<template>
	<div id="mt-40">
		{{id}}
		<div class="newsSection">
			<div class="titileWrap">
				<h2 >{{info.title}}</h2>
				<div class="titleNav">
					<a id="note_avatar">
						<img :src="info.userPic"></a>
					<span>发布于  {{info.pubTime|dateFmt('YYYY-MM-DD HH:MM:ss')}} </span>
					<span class="brows">{{info.hits}}次浏览</span>
				</div>
			</div>
			<div class="contents">
				<pre v-text="info.contents">
				</pre>
				
			</div>
		</div>
		<comment :commentId="id"></comment>
	</div>
</template>

<script>
	import common from '../../ajaxReqKits/common.js';
	/*import comment from '@/components/subComponent/comment';*/
	import comment from '../subComponent/comment';

	export default {
		data() {
			return {
				id: 0,
				info: {}
			}
		},
		created() {
			this.id = this.$route.params.id;
			this.getNewsDetail(this.id)
		},
		methods: {
			getNewsDetail(id) {
				var _this = this;
				this.$ajax.get(common.apiReqPath + "/newsDetail.jsp", {
						params: {
							id: id
						}
					})
					.then(function(response) {
						_this.info = response.data;
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},
		components: {
			comment: comment
		}

	}
</script>

<style scoped>
	
	.titileWrap h2{
		height: 30px;
		text-align: center;
	}
	
	.titileWrap .titleNav{
		margin-left: 2rem;
	}
	
	
	.brows{
		
		margin-left: 4rem;;
	}
	
	.titleNav img {
		display: block;
		width: 20px;
		height: 20px;
		border-radius: 100%;
	}
	
	.titleNav #note_avatar {
		margin-right: 10px;
		float: left;
	}
	
	.contents {
		padding: 0.8rem;
		background: #fff;
		margin: 0.8rem;
		text-indent: 1.8rem;
	}
	
	.contents pre{
		white-space: pre-wrap;
	}
</style>